<template>
    <div class="homeBox">
      <div class="video">
        <CourseVideo :src=course.coursephoto></CourseVideo>
      </div>
<div class="courseBox">

  <div class="course-infor">
    <div class="infor-head">
    <el-row :gutter="20"  type="flex" justify="space-around" style="align-items: center;margin:10px 0px 0px 5px;">
      <el-col style="width: fit-content"><div class="grid-content "  id="font-title">{{course.coursename}}</div></el-col>
      <el-col :span="3"><div class="grid-content" >
        <el-dropdown>
  <span class="el-dropdown-link">
    我要分享<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>新浪微博</el-dropdown-item>
            <el-dropdown-item>QQ空间</el-dropdown-item>
            <el-dropdown-item>微信</el-dropdown-item>
            <el-dropdown-item >QQ</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div></el-col>
      <el-col :span="6"><div class="grid-content " >
        <el-radio-group v-model="radio1" size="mini">
          <el-radio-button label="男教练"></el-radio-button>
          <el-radio-button label="女教练"></el-radio-button>
        </el-radio-group>
      </div></el-col>
      <el-col :span="3" offset="7"><div class="grid-content  font-gray" ></div></el-col>
    </el-row>
    </div>

    <div class="infor-body">
      <el-row>
        <el-col :span="18"><div class="grid-content ">
    <el-descriptions >
      <el-descriptions-item label="强度"><el-rate
        v-model=course.intensity
        disabled>
      </el-rate></el-descriptions-item>
      <el-descriptions-item label="部位">{{course.bodypart}}</el-descriptions-item>
      <el-descriptions-item label="器械">{{course.apparatus}}</el-descriptions-item>
      <el-descriptions-item label="课时">
        8天
      </el-descriptions-item>
      <el-descriptions-item label="日均">6分</el-descriptions-item>
      <el-descriptions-item label="总消耗">300卡</el-descriptions-item>
    </el-descriptions>
        </div></el-col>
        <el-col :span="3" offset="3"><div class="grid-content ">
          <router-link :to="{name: '订单信息',query:{course:JSON.stringify(this.course)}}" v-if="!stagestatus">
          <el-button type="danger">{{this.buttonstatus}}</el-button>
          </router-link>
          <el-button type="danger" v-else-if="stagestatus">{{this.buttonstatus}}</el-button>

        </div></el-col>

      </el-row>
    </div>

  </div>

  <div class="course-list" v-if="stagestatus">
<CourseStage :courseid=course.id :stageamount=course.stageamount></CourseStage>

  </div>

</div>
    </div>
</template>

<script>
    import CourseVideo from "./CourseVideo";
    import CourseStage from "./CourseStage";

    export default {
        name: "CourseDetail",
      components:{
        CourseVideo:CourseVideo,
        CourseStage:CourseStage
      },
      data() {
        return {
          activeNames: ['1'],
          course:[],
          radio1:"男教练",
          value:2,
          title:"第一阶段",
          buttonstatus:"加入训练",
          stagestatus:false,
          userid:null

        };
      },
      methods: {
        handleChange(val) {
          console.log(val);
        },

      },
      created() {
        let data = this.$route.query.course;
        this.course = JSON.parse(data);

        this.userid = sessionStorage.getItem("userId");
        var url = '/dingdan/'+this.course.id+'&&'+this.userid;
        this.$axios.get(url)
          .then( (res)=> {
            //document.write("data is coming", res.data.code);
            if (res.data.code === 200) {
              this.buttonstatus="开始训练";
              this.stagestatus=true;
              }
            else {
          this.buttonstatus="加入训练";
            }
          }).catch(function (error) {
          console.log(error);
        } );

      }
    }
</script>

<style scoped>
  .el-row {
    margin-bottom: 5px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius: 4px;

  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }

  .homeBox{
    min-height: 100vh;
    background: #475669;

  }
.video{
  width:1200px;
  height: 673px;
  background: white;
  margin: auto;
}
  .courseBox{
    padding:10px;
    margin: auto;
    max-height: 1200px;
  background: white;
  }
  .course-infor{
    width: 1190px;
    margin: auto;

    border: #e4e1e9 solid;

  }
  .course-list{
    width: 1200px;
    margin: 5px auto;


  }
  #font-title{

    font-size: 21px;

  }
  .font-gray{

    font-size: 16px;
    color: #B3C0D1;
  }
  .infor-head{
    width: 1190px;
    border-bottom: #e4e1e9 solid;


  }
  .infor-body{
    margin: 10px 5px 5px 20px ;
    width: 1100px;
  }
</style>
